<template>
  <div class="unusual">
    <div class="top">
      <h3 class="title">异常服务中心</h3>
      <div class="top-right">
        <span class="s-title">统计周期:</span>
        <el-select v-model="query.period" class="handle-select">
          <el-option key="1" label="今日" value="1"></el-option>
          <el-option key="2" label="近七日" value="2"></el-option>
          <el-option key="3" label="近一月" value="3"></el-option>
        </el-select>
        <span class="s-title">统计范围:</span>
        <el-select v-model="query.range" class="handle-select">
          <el-option key="1" label="全量服务" value="1"></el-option>
<!--          <el-option key="2" label="全量服务1" value="2"></el-option>-->
        </el-select>
        <span class="line"></span>
        <span class="excel" @click="exportExcel">清单导出</span>
      </div>
    </div>
    <div class="unusual-info">
      <div class="unusual-wrapper">
        <div
            class="list"
            @click="handleList(index)"
            :class="{'act': listAct == index}"
            v-for="(item, index) in unusualData"
            :key="index"
        >
          <div class="list-top">
            <span class="name">{{item.type}}</span>
            <span class="pic" :class="{'normal': item.normal}"></span>
          </div>
          <p class="amount">{{item.amount}}</p>
        </div>
      </div>
      <div>
<!--        <schart class="schart" canvasId="line" :options="options1"></schart>-->

        <div ref="chart" style="width:100%;height:376px"></div>
      </div>
    </div>

    <!-- excel弹出框 -->
    <el-dialog title="服务异常清单" :visible.sync="editVisible" width="70%">
      <el-table :data="tableData" border class="excel-table" height="250">
        <el-table-column label="服务类型" prop="servType"></el-table-column>
        <el-table-column label="服务名称" prop="servName"></el-table-column>
        <el-table-column label="服务编码" prop="servCode"></el-table-column>
        <el-table-column label="异常详情" prop="exceptionInfo">
          <!--<template slot-scope="scope">
            <div>
              <div>
                成功率:
                <span class="red">{{scope.row.error.success + '%'}}</span> > 98%
              </div>
              <div>
                平均响应时间:
                <span class="red">{{scope.row.error.time + '秒'}}</span> > 1.23秒
              </div>
              <div>
                调用次数/秒:
                <span class="red">{{scope.row.error.count + '次'}}</span> > 500次
              </div>
              <div>
                垃圾信息告警:
                <span class="red">{{scope.row.error.warn}}</span>
              </div>
            </div>
          </template>-->
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleExcel">导 出</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import exceptionTrend from "@/api/exceptionTrend";
import expExc from "@/api/exportExcel";
import axios from 'axios';
import exportExcel from "@/api/exportExcel";

export default {
  data() {
    return {
      query: {
        period: '1',
        range: '1',
        pageIndex: 1,
        pageSize: 10,
        scaId: ""
      },
      fjh: [],
      form: {},
      editVisible: false,
      pageTotal: 1,
      tableData: [

      ],
      CREATETIME:[],
      succNum: [],
      exceptionNum: [],
      succRate: [],
      respNum: [],
      reqNum: [],
      regNum: [],
      unusualData: [
        {
          type: '正常',
          normal: true,
          amount: '0'
        },
        {
          type: '异常',
          normal: false,
          amount: '0'
        },
        {
          type: '成功率异常',
          normal: true,
          amount: '0'
        },
        {
          type: '响应时间异常',
          normal: true,
          amount: '0'
        },
        {
          type: '调用频率异常',
          normal: true,
          amount: '0'
        },
        {
          type: '垃圾信息告警',
          normal: true,
          amount: '0'
        }
      ],
      listAct: '0',
      options1: {
        type: 'line',
        title: {
          text: ''
        },
        bgColor: '#fbfbfb',
        labels: ['8:00', '9:00', '10:00', '11:00', '12:00'],
        datasets: [
          {
            data: [234, 278, 270, 190, 230]
          }
        ]
      }
    };
  },
  props: ['chosenItem'],
  components: {
    /*Schart*/
  },
  mounted() {
    this.getEchartData();
    this.loadExceptionTrend();
  },
  created() {
    // this.loadExceptionTrend();
  },
  watch: {
    query: {
      handler(){
        this.loadExceptionTrend();
      },
      //
      deep: true
    }
  },
  methods: {
    exportExcel(e) {
      // 展示异常数据
      let that = this;
      that.editVisible = true;
      console.log(e);
      exceptionTrend.exceptionData().then(resp => {
        that.tableData = resp.exceptionInfo;
        console.log(that.tableData[0].servCode);
      })
    }, // 保存编辑
    handleExcel() {
      this.editVisible = false;
      // this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      // this.$set(this.tableData, this.idx, this.form);

      // 导出异常记录表Excel
      axios.get(expExc.path(),{'responseType': 'blob'}).then(function (response) {
        const blob = new Blob([response.data]);
        const fileName = '异常记录表.xls';
        const linkNode = document.createElement('a');

        linkNode.download = fileName; //a标签的download属性规定下载文件的名称
        linkNode.style.display = 'none';
        linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
        document.body.appendChild(linkNode);
        linkNode.click();  //模拟在按钮上的一次鼠标单击

        URL.revokeObjectURL(linkNode.href); // 释放URL 对象
        document.body.removeChild(linkNode);
      })
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleList(index) {
      this.listAct = index;
    },
    // 加载异常记录数据
    loadExceptionTrend() {
      exceptionTrend.exceptionTrend({
        timeRange: this.query.period,
        statisticalRange: this.query.range,
        scaId: this.query.scaId
      }).then(resp => {
        var succNumArr = new Array()
        var exceptionNumArr = new Array()
        var succRateArr = new Array()
        var respNumArr = new Array()
        var reqNumArr = new Array()
        var regNumArr = new Array()
        var createtimeArr = new Array()

        if (resp != null) {
          for (let i = 0; i < resp.list.length; i++) {
            succNumArr.push(resp.list[i].SUCC_SERVER_NUM)
            exceptionNumArr.push(resp.list[i].EXCEPTION_FLAG)
            succRateArr.push(resp.list[i].SUCC_FLAG)
            respNumArr.push(resp.list[i].USEDTIME_FLAG)
            reqNumArr.push(resp.list[i].REQ_FLAG)
            regNumArr.push(resp.list[i].REG_FLAG)
            createtimeArr.push(resp.list[i].CREATETIME)
          }
          this.succNum = succNumArr;
          this.exceptionNum = exceptionNumArr;
          this.succRate = succRateArr;
          this.respNum = respNumArr;
          this.reqNum = reqNumArr;
          this.regNum = regNumArr;
          this.CREATETIME = createtimeArr;

          this.getEchartData()
        }
      })
    },
    getEchartData() {
      let that = this;
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          xAxis: {
            type: 'category',
            data: this.CREATETIME,
            // 不会出框
            boundaryGap: true
            // data: ['8:00', '9:00', '10:00', '11:00', '12:00']
          },
          toolbox: {
            feature: {
              saveAsImage: {},
              mark : '辅助线开关',
            }
          },
          yAxis: {
            type: 'value'
          },
          /*
          // legend 为顶部区分色条
          legend: {
              data: ['正常', '异常', '成功率异常', '响应时间异常', '调用频率异常','注阅异常']
          },
          */
          tooltip: {
            trigger: 'axis',
            // triggerOn: 'click',   //触发方式
            axisPointer : { // 坐标轴指示器，坐标轴触发有效
              type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter:function(params){
              var html = '';
              var arr = new Array();
              if(params.length>0){
                var Xindex = params[0].dataIndex;
                for ( var int = 0; int < params.length; int++) {
                  // maker为tooltip提示框的颜色小圆点；seriesName为名称；data为数据
                  html+=params[int].marker+ params[int].seriesName+':'+params[int].data+'<br>';
                  that.unusualData[0].amount = params[1].data;
                  that.unusualData[1].amount = params[2].data;
                  that.unusualData[2].amount = params[3].data;
                  that.unusualData[3].amount = params[4].data;
                  that.unusualData[4].amount = params[5].data;
                  that.unusualData[5].amount = params[6].data;
                  arr.push(params[int].data);
                }
              }
              // 控制台打印日志回调函数返回数据
              // console.log(html)
              return html;
            }
          },
          series: [
            {
              name: '日期',
              data: this.CREATETIME,
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#4990e2',
                  label: {
                    name:'ceshi',
                    show: true,
                    postion: 'top',
                    textStyle: {
                      color: '#4990e2'
                    }
                  },
                  lineStyle: {
                    color: '#4990e2'
                  }
                }
              }
              // symbol: 'circle',
              /*itemStyle: {
                normal: {
                  color: '#4990e2',
                  label: {
                    show: true,
                    postion: 'top',
                    textStyle: {
                      color: '#4990e2'
                    }
                  },
                  lineStyle: {
                    color: '#4990e2'
                  }
                }
              }*/
            },
            {
              name: '正常',
              data: this.succNum,
              type: 'line',
              // symbol: 'circle',
              /*itemStyle: {
                normal: {
                  color: '#4990e2',
                  label: {
                    show: true,
                    postion: 'top',
                    textStyle: {
                      color: '#4990e2'
                    }
                  },
                  lineStyle: {
                    color: '#4990e2'
                  }
                }
              }*/
            },
            {
              name: '异常',
              type: 'line',
              data: this.exceptionNum
            },
            {
              name: '成功率异常',
              type: 'line',
              data: this.succRate
            },
            {
              name: '响应时间异常',
              type: 'line',
              data: this.respNum,
            },
            {
              name: '调用频率异常',
              type: 'line',
              data: this.reqNum
            },
            {
              name: '注阅异常',
              type: 'line',
              data: this.regNum
            }
          ]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () {
          myChart.resize();
        });
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener('resize', function () {
          myChart.resize();
        });
      });
    }
  }
};
</script>

<style scoped>
.el-dialog__wrapper {
  overflow: hidden;
}
.pagination {
  margin: 10px 0;
}
.pagination /deep/ .el-pagination span:not([class*='suffix']) {
  height: 20px;
  line-height: 20px;
}
.pagination /deep/ .el-pager li {
  height: 20px;
  line-height: 20px;
  min-width: 20px;
  font-size: 12px;
}
.pagination /deep/ .el-pagination button {
  height: 20px;
  line-height: 20px;
  min-width: 20px;
  font-size: 12px;
}
.pagination /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  border-radius: 50%;
}
.unusual {
}
.top {
  display: flex;
  align-items: center;
}
.top .title {
  font-size: 15px;
  font-weight: normal;
}
.top .top-right {
  text-align: right;
  flex: 1;
}
.top .s-title {
  font-size: 12px;
  color: #777;
  margin-right: 15px;
  margin-left: 19px;
}
.top .handle-select {
  width: 105px;
  color: #727376;
}
.top .line {
  display: inline-block;
  margin: 0 20px;
  width: 0;
  height: 30px;
  border-left: 1px dashed #d9d9d9;
  vertical-align: -11px;
}
.top .excel {
  width: 57px;
  height: 30px;
  padding-left: 33px;
  line-height: 30px;
  border-radius: 5px;
  background: url(../../../assets/img/excel.png) 7px 50% no-repeat #f4f6fc;
  font-size: 12px;
  color: #727376;
  text-align: center;
  background-size: 17px;
  display: inline-block;
  cursor: pointer;
}
.excel-table {
  padding-bottom: 0;
}
.excel-table .red {
  color: #ff0000;
}
.unusual /deep/ .el-dialog__body {
  padding: 20px 20px 0;
}
.unusual-wrapper {
  margin-top: 20px;
  display: flex;
  background-color: #f4f6fc;
  height: 65px;
  border-radius: 5px;
}
.unusual-wrapper .list {
  flex: 1;
  padding: 13px 10px 0 20px;
}
.unusual-wrapper .act {
  background-color: #f58e7a;
  color: #fff;
}
.unusual-wrapper .list .amount {
  font-size: 14px;
  margin-top: 13px;
}
.unusual-wrapper .list .list-top {
  display: flex;
  align-items: center;
}
.list-top .name {
  font-size: 12px;
}
.list-top .pic {
  width: 12px;
  height: 12px;
  background: url(../../../assets/img/attention.png) 100% 0 no-repeat;
  background-size: contain;
  flex: 1;
  text-align: right;
}
.list-top .normal {
  width: 12px;
  height: 12px;
  background: url(../../../assets/img/normal.png) 100% 0 no-repeat;
  background-size: contain;
  flex: 1;
  text-align: right;
}
.unusual-wrapper .act .pic {
  background: url(../../../assets/img/attention-fff.png) 100% 0 no-repeat;
  background-size: contain;
}
.unusual-wrapper .act .normal {
  background: url(../../../assets/img/normal-fff.png) 100% 0 no-repeat;
  background-size: contain;
}
.schart {
  width: 100%;
  height: 400px;
}
</style>